<template>
  <div class="vipcontent">
    <Header>
      <template v-slot:title>
        <div class="row vip">
          <div class="logo fl">
            <router-link to="/">
              <img src="../assets/image/mall_index/ia_100000001.png" alt="" />
            </router-link>
            <div class="vip">会员中心</div>
          </div>
          <div class="search fr">
            <router-link
              to="/vip/index"
              :class="{ zrc: $route.path == '/vip/index' }"
            >
              会员首页
            </router-link>
            <router-link
              to="/vip/intergral"
              :class="{ zrc: $route.path == '/vip/intergral' }"
            >
              积分中心
            </router-link>
            <router-link
              to="/vip/member-grow"
              :class="{ zrc: $route.path == '/vip/member-grow' }"
            >
              会员成长
            </router-link>
          </div>
        </div>
      </template>
    </Header>
    <router-view></router-view>
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 侧边咨询客服按钮 -->
    <consult-serve></consult-serve>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import ConsultServe from "../components/ConsultServe.vue";
export default {
  components: {
    Header,
    Footer,
    ConsultServe,
  },
};
</script>

<style lang="scss">
.vipcontent {
  background-color: #f2f2f2;
  .row.vip {
    .logo {
      padding: 0;
      height: 60px;
      line-height: 60px;
      display: flex;
      align-items: center;
      a {
        img {
          display: block;
          width: 120px;
          height: 33px;
        }
      }
      .vip {
        margin-left: 10px;
        font-size: 14px;
      }
    }
    .search {
      a {
        display: inline-block;
        font-size: 16px;
        height: 60px;
        line-height: 60px;
        color: rgb(37, 55, 70);
        padding: 0 20px;
        cursor: pointer;
      }
      a.zrc {
        color: rgb(255, 208, 75);
      }
    }
  }
}
</style>